<template>
	<div id="mm">
		<login class="lo"></login>
		<div class="head">
			<i class="iconfont icon-caidan" @click="open"></i>
			<span>我的音乐</span>
			<i class="iconfont icon-daohang_tinggeshiqu_"></i>
		</div>
		<div class="contant">
			
		<ul class="two">
			<li class="local music">
				<i class="iconfont icon-aguangdie"></i>
				<p>喜欢的歌</p>
				<span>2</span>
				<i class="iconfont icon-bofang"></i>
			</li>
			<li class="local collect">
				<i class="iconfont icon-xin"></i>
				<p>我的收藏</p>
				<span>0</span>
				<i class="iconfont icon-bofang"></i>
			</li>
		</ul>
		<div class="list shop">
			<i class="iconfont icon-gouwudai"></i>
			<p>已购音乐</p>
			<span>0</span>
			<span id="jiankuohao">
				>
			</span>
		</div>
		<div class="list downLoad">
			<i class="iconfont icon-xiazai"></i>
			<p>已购音乐</p>
			<span>0</span>
			<span id="jiankuohao">
				>
			</span>
		</div>
		<div class="list listen">
			<i class="iconfont icon-zhongbiao"></i>
			<p>已购音乐</p>
			<span>0</span>
			<span id="jiankuohao">
				>
			</span>
		</div>
		<div class="selfList">
			自建歌单(0)
		</div>
		<div class="logo">
			<i class="iconfont icon-yunzhanghu"></i>
			<span>立即登录</span>
			<p>,让音乐跟着你走</p>
		</div>
		<Recommend class="re"></Recommend>
		</div>
		<!-- 底部 -->
            <div class="footer">
                <ul>
                  <li>
                    <div class="liBox" @click="Find">
                      <p><i class="iconfont icon-changpian"></i></p>
                      <p>发现</p>
                    </div>
                    
                  </li>
                  <li>
                    <div class="liBox"  @click="listen">
                      <p><i class="iconfont icon-yinle"></i></p>
                      <p>随心听</p>
                    </div>
                    
                  </li>
                  <li >
                    <div class="liBox " @click="Video_B">
                      <p class="impo"><i class="iconfont icon-shipin"></i></p>
                      <p class="impo">视频</p>
                    </div>
                  </li>
                  <li>
                    <div class="liBox blue" >
                      <p><i class="iconfont icon-yinleyinfujiezou"></i></p>
                      <p>我的音乐</p>
                    </div>
                  </li>
                </ul>
            </div>
	</div>
</template>
<script>
import jsonp from "jsonp";
import Recommend from "../components/Recommend";
import login from "../components/login";
export default {
  name: "",
  data() {
    return {
      whichShow: [false, true, false, false, true],
      whichColor: [
        "color: #22c5bd",
        "color:#a3a3a3",
        "color:#a3a3a3",
        "color:#a3a3a3"
      ]
    };
  },
  components: {
    Recommend,
    login
  },
  methods: {
    // 路由发现
    Find() {
      this.$router.push({ name: "Find" });
    },
    // 路由随心听
    listen() {
      this.$router.push("/Listen");
    },
    // 路由视频
    Video_B() {
      this.$router.push({ name: "Video_B" });
    },
    open() {
      document.querySelector(".lo").style.transform = "translateX(0%)";
      document.querySelector(".lo").style.opacity = "1";
    }
  }
};
</script>
<style lang='scss' scoped>
@charset "utf-8";
html,
body {
  width: 100%;
  height: 100%;
}
#mm {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  .lo {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    z-index: 100;
  }
  .head {
    width: 100%;
    height: 8%;
    line-height: 1.5rem;
    display: flex;
    justify-content: space-between;
    background: #21c5be;
    box-sizing: border-box;
    padding: 0 0.3rem;
    i {
      font-size: 0.7rem;
      color: white;
    }
    span {
      font-size: 0.5rem;
      color: white;
    }
  }
  .contant {
    height: 82%;
    overflow: auto;
    /*.re{
				height: 3.2rem;
				overflow: auto;
			}*/
  }
  .two {
    width: 100%;
    height: 1.2 * 1.65rem;
    overflow: hidden;
    background: #f9f9f9;
    padding: 1% 3%;
    box-sizing: border-box;
    font-size: 0;
    margin-top: 0.5 * 1.65rem;
    .local {
      width: 47%;
      height: 1 * 1.65rem;
      border: 1px solid white;
      box-shadow: 0px 0px 6px 0px gray;
      background: white;
      position: relative;
      .iconfont {
        font-size: 0.5 * 1.65rem;
        position: absolute;
        top: 0.28 * 1.65rem;
        left: 0.15 * 1.65rem;
      }
      .icon-xin {
        color: #ff7560;
      }
      p {
        font-size: 0.27 * 1.65rem;
        /*display: inline-block;*/
        position: absolute;
        top: 0.23 * 1.65rem;
        left: 0.9 * 1.65rem;
      }
      span {
        color: #9b9b9b;
        font-size: 0.19 * 1.65rem;
        position: absolute;
        top: 0.65 * 1.65rem;
        left: 0.9 * 1.65rem;
      }
      .icon-bofang {
        font-size: 0.42 * 1.65rem;
        color: #091818;
        position: absolute;
        top: 0.32 * 1.65rem;
        left: 2.2 * 1.65rem;
      }
    }
    .music {
      float: left;
    }
    .collect {
      float: right;
    }
  }
  .list {
    width: 100%;
    height: 1.16 * 1.65rem;
    font-size: 0;
    position: relative;
    border-bottom: 2px solid #f9f9f9;
    .iconfont {
      font-size: 0.4 * 1.65rem;
      position: absolute;
      top: 0.39 * 1.65rem;
      left: 0.32 * 1.65rem;
    }
    p {
      display: inline-block;
      font-size: 0.25 * 1.65rem;
      position: absolute;
      top: 0.4 * 1.65rem;
      left: 1.08 * 1.65rem;
    }
    span {
      font-size: 0.21 * 1.65rem;
      color: #999999;
      position: absolute;
      left: 5.6 * 1.65rem;
      top: 0.5 * 1.65rem;
    }
    #jiankuohao {
      position: absolute;
      left: 5.9 * 1.65rem;
      top: 0.5 * 1.65rem;
    }
  }
  .selfList {
    height: 0.56 * 1.65rem;
    line-height: 0.56 * 1.65rem;
    font-size: 0.26 * 1.65rem;
    background: #f7f7f7;
    padding-left: 0.28 * 1.65rem;
  }
  .logo {
    width: 100%;
    height: 1.3 * 1.65rem;
    line-height: 1.3 * 1.65rem;
    border-bottom: 20px solid #f7f7f7;
    text-align: center;
    .icon-yunzhanghu {
      font-size: 0.33 * 1.65rem;
      margin-right: 0.17 * 1.65rem;
    }
    span {
      font-size: 0.25 * 1.65rem;
      color: #568fca;
      cursor: pointer;
    }
    p {
      display: inline-block;
      font-size: 0.25 * 1.65rem;
      color: #8a8989;
    }
  }
  // 底部
  .footer {
    width: 100%;
    height: 10%;
    background: #fff;

    ul {
      width: 100%;
      height: 100%;

      li {
        display: inline-block;
        width: 25%;
        height: 100%;
        position: relative;
        .liBox {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;

          p {
            text-align: center;
            font-size: 0.25rem;
            color: #999999;
            margin-top: 0.2rem;
          }
          i {
            font-size: 0.55rem;
          }
        }
        .blue {
          p {
            color: #22c5bd;
          }
        }
      }
    }
  }
}
</style>